<template>
    <el-calendar ref="calendar">
        <template #header="{ date }">
            <el-button size="small" @click="selectDate('prev-month')">
                <RectLeft size="24px" />
            </el-button>
            <span>{{ date }}</span>
            <el-button size="small" @click="selectDate('next-month')">
                <RectRight size="24px" />
            </el-button>
        </template>
    </el-calendar>
</template>
  
<script setup>
import { ref } from 'vue'
import { RectLeft, RectRight } from '@nutui/icons-vue';

const calendar = ref('')
const selectDate = (val) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}
</script>

<style>
.el-calendar{
    --el-calendar-border: none;
    --el-calendar-cell-width: 50px;
    background-color: #fafafa;
    border-radius: 10px;
    margin: 5px 0;
}
.el-calendar__header{
    display: flex;
    justify-content: center;
    padding: 12px 20px 0 20px;
}
.el-calendar__header .el-button{
    border: none;
}
</style>